How to name design tokens

Design Tokens Mastery Course

Learn to structure, manage, and scale design tokens.

Guides

Presentations

Checklists

Guides

Presentations

Checklists

Guides

Published

•

Published

•

Published

•

Published

•

Published

•

Published

So, what are design tokens?

Design tokens

are

nicknames

for

design elements.

size-ladybeetle

🐞

size-butterfly

🦋

size-squirrel

🐿️

size-dog

🐕

size-elephant

🐘

Imagine creating names with real-world analogies. Not okay :)

Mobile version

coming soon

Why is it so hard?

“I will just use this color here ...”

"Difficult to understand".

What are Figma Variables?

Oooops, scaling...😅

What does a design system mean to you?

What is Git?

Should we have a lot of tokens?

Omg,
so many
duplicates.

Too many tokens

What is the best

naming strategy?

I have no clue what composite tokens are.

Life before tokens was easier. 😅

“Token is deprecated”. What now?

Ohhh, no guides here. 🫠

Library is not updated. 😢

I will just use AI …

Common challenges

Code, not design, is the definitive source. It's the final view for users.
We should have one central repository to pull and push design tokens.

Code ≠ design

Collaboration

Developers

Designers

Content Specialists

Product manager

Stakeholders

Accessibility Specialists

Design tokens

are

design decisions.

Fewer decisions,

less chaos.

You get:

Improved product development

Easier maintenance

Brand consistency

Scalability

green grass

too sunny

fire

##F8783A

barbie-light

my favourite

water bright

darker vanilla

I’m vanilla

they call me invisible

dark green

Design Token Categories

color

font

space

size

border

border radius

gradient

shadow

motion

time

icons

composite

z-index

Design token types

Raw value

#FFDF38

Primitive

Semantic

Component

Computational

Adaptive

light

dark

Composite design tokens

Text Style

font-size

weight

family

line-height

Border

color

width

style

Gradient

colors

Shadow

color

blur

spread

direction

"header-text-style": {
"font-family": "{font-family-header}",
"font-size": "{font-size-header}",
"font-weight": "{font-weight-bold}"

Token scales

numeric

100

200

300

400

500

numeric

xxl

sizes

low

medium

high

emphasis

level-1

level-2

level-3

levels

regular

active

heading

strong

sharp

pill

medium

card

small

full

instant

slow

medium

fast

What users see

Choosing theme

Applying design tokens

Connecting

with global

design tokens

User
Interface

Design

Multi-brand

Design
System

Components

Semantic

Design

Tokens

Foundations

Multi-brand design system

Workflow

components

Define foundations

Workshop

Documenting

MVP

Launch

Theming and scaling

Workshop

Workshop Goals

Understand current processes

General alignment

🕵️ Game: Name of the component?

Naming structure versions

Share experience

Choose tooling

Design Tokens Naming Structure

Names should be:

Short

Meaningful

Scalable

Flexible

Clear, no jargon

Some well-known approaches:

C-T-I approach

What's inside:

Step-by-step guide with screenshots

Video instructions

Instructions

Workshop Instructions

Ready to use Airtable database

Figma template

List of Automations with set-up guides

Prompts and examples you can copy and use immediately

List of useful tools

Useful Airtable Extensions

Find out more

Design Tokens Mastery Guide

Guides

Presentations

Checklists

Guides

Step-by-step video lessons

Presentations in PDF

Editable Figma playground files

Editable JSON files (simple to multidimensional themes)

Checklists in PDF, Google Docs, Airtable

The list of useful tools

List of design systems with tokens

Lifetime access to course materials

Playground files to apply learnings

🔄

Free course updates and new lessons

💎

BONUS: Tool for generating design tokens

Find out more

Start small.

Play.

Blend in.

Learn more

Inside Design Tokens: Definitions & Traits by Thomas Gossman

Thomas Gossman

Guide

UX Design

Creating a flexible design token taxonomy for Intuit’s Design System

Nate Baldwin

Design tokens

Style Dictionary

Naming Tokens in Design Systems

Nathan Curtis

Design Tokens

Material Design

Design Tokens

Adobe

When “semantic tokens” are no longer semantic.

Nate Baldwin

Design tokens

Salesforce

Naming design tokens

Lukas Oppermann

Design tokens

Atlassian

Naming design tokens

Samantha Gordashko

48,1% of respondents still prefer to craft their own naming conventions saying they values "ease of understanding" as their priority when naming.

State of Design Tokens 2024

Mobile version

coming soon

Design Tokens Naming Playbook

Design Tokens Naming Playbook

Design Tokens Naming Playbook

Design Tokens Mastery Course

What's inside: